<template>
  <el-container v-if="isSingle">
    <!-- <el-header v-if="showHeader" height="36px">
      <header-title :title="headerTitle" />
    </el-header> -->
    <el-main class="mainDetails">
      <!-- 页面主体内容 -->
      <el-collapse v-model="logisticsName">
        <el-collapse-item name="materialsApplication">
          <template slot="title">
            <i class="item_icon" />物资申领
          </template>
          <div class="content-box">
            <materials-application
              ref="materialsApplication"
              :meta-edit="metaEdit"
              :note.sync="note"
              :receive-details-data="receiveDetailsData"
              @doSaveApplyBySite="queryReceiveDetails(query)"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="logisticsName">
        <el-collapse-item name="materialsInfoList">
          <template slot="title">
            <i class="item_icon" />物资申领单
          </template>
          <div class="content-box">
            <el-button
              v-if="
                +projectInfo.isNewPrj &&
                  (!sjbgcheck&&reState) &&
                  acceptCheck&&isEdit&&metaEdit
              "
              class="pms-button-primary ml-5 mb-10"
              style="float: right"
              @click="handlePush"
            >物资信息同步资源</el-button>
            <materials-Info-list
              v-for="item in applyData"
              :key="item.recipientApplyId"
              :info-list="item"
              :meta-edit="metaEdit"
              :project-info="projectInfo"
              @doSaveBackInfo="queryReceiveDetails(query)"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
  <el-container v-else v-loading="loading">
    <!-- <el-header height="36px">
      <header-title :title="headerTitle" />
    </el-header> -->
    <el-main class="mainDetails">
      <el-collapse v-model="logisticsName">
        <el-collapse-item name="materialsApplication" class="mb-10">
          <template slot="title">
            <i class="item_icon" />项目信息
          </template>
          <div class="content-box">
            <span>{{ projectInfo.projectName }}</span>-<span>{{ projectInfo.orgName }}</span>【<span v-debounce="()=>jump(projectInfo.prjCode)" style="color: #53c7f8;cursor: pointer;">{{ projectInfo.prjCode }}</span>】
            <span
              v-if="sjbgcheck"
              class="color-red"
            >设计变更中</span>
            <span v-if="!reState" class="color-red">
              销项项目
            </span>
          </div>
        </el-collapse-item>
        <el-collapse-item name="materialsDetails" class="mb-10">
          <template slot="title">
            <i class="item_icon" />物资申领情况
          </template>
          <div class="content-box">
            <materials-app-all
              ref="materialsApplication"
              :design-data="designData"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item name="getMaterials" class="mb-10">
          <template slot="title">
            <i class="item_icon" />项目物资申领
          </template>
          <div class="content-box">
            <materialsApplicationAll
              v-if="receiveDetailsVisible"
              ref="materialsApplicationAll"
              :receive-details-data="receiveDetailsData"
              :note.sync="note"
              :meta-edit="metaEdit"
              :prj-params="prjParams"
              @addApplyDetail="queryReceiveDetails(query)"
              @loadingStart="handleLoading"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item name="materialsInfoList">
          <template slot="title">
            <i class="item_icon" />物资申领单
          </template>
          <div class="content-box">
            <el-button
              v-if="
                !!+projectInfo.isNewPrj &&
                  !sjbgcheck&&reState &&
                  acceptCheck&&isEdit&&metaEdit
              "
              class="pms-button-primary ml-5 mb-10"
              style="float: right"
              @click="handlePush"
            >物资信息同步资源</el-button>
            <materials-Info-list
              v-for="item in applyData"
              :key="item.recipientApplyId"
              :info-list="item"
              :meta-edit="metaEdit"
              :note="note"
              :project-info="projectInfo"
              @doSaveBackInfo="queryReceiveDetails(query)"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import materialsApplication from './components/materialsApplication.vue'
import materialsInfoList from './components/materialsInfoList.vue'
import materialsAppAll from './components/materialsAppAll.vue'
import materialsApplicationAll from './components/materialsApplicationAll.vue'
// import * as Common from '@/api/common'
import { getShopTokenAndUrl, queryReceiveDetails } from '@/api/material'
import { pushResourceAndFinance } from '@/api/acceptantce'
import $ from 'jquery'
export default {
    name: 'AcceptMangeDetail',
    components: {
        materialsApplication,
        // HeaderTitle,
        materialsInfoList,
        materialsAppAll,
        materialsApplicationAll
    },
    props: {
        showHeader: {
            type: Boolean,
            default: true
        },
        prjParams: {
            type: Object,
            default: () => ({})
        },
        metaEdit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // headerTitle: '物资申领',
            activeNames: [],
            buttonDisable: ['doNext'],
            selectList: {},
            detailData: {},
            logisticsName: [
                'materialsApplication',
                'materialsInfoList',
                'materialsDetails',
                'getMaterials'
            ],
            applyData: [],
            materialApplication: ['materialApplication'],
            materialsApplicationVisible: false,
            applicationDialogFlag: 0,
            componentsType: '',
            title: '物资申领',
            projectInfo: {},
            note: '',
            receiveDetailsData: {},
            designData: [],
            receiveDetailsVisible: false,
            loading: false,
            query: {}
        }
    },
    computed: {
        // query() {
        //     return this.$route.query
        // },
        sjbgcheck() {
            if (this.projectInfo) {
                return !!+this.projectInfo.sjbgcheck
            }
            return false
        },
        reState() {
             if (this.projectInfo) {
                console.log(!+this.projectInfo.reState)
                return !+this.projectInfo.reState
            }
            return false
        },
        isSingle() {
            return !(
                this.query.manageMode === '03' || this.query.manageMode === '04'
            )
        },
        acceptCheck() {
            if (this.projectInfo) {
                return !+this.projectInfo.acceptcheck
            }
            return false
        },
        isEdit() {
             if (this.projectInfo) {
                return !!+this.projectInfo.isEdit
            }
            return false
        }
    },
    watch: {
        prjParams: {
            immediate: true,
            handler(newV) {
                if (JSON.stringify(newV) !== '{}') {
                    this.query = newV
                    this.queryReceiveDetails(newV)
                }
            },
            deep: true
        }
    },
    methods: {
        handleLoading() {
            this.loading = !this.loading
        },
        handleMaterialApplication(type, title) {
            this.componentsType = type
            this.title = title
            this.materialsApplicationVisible = true
        },
        doSaveApplyBySite() {
            this.queryReceiveDetails(this.query)
        },
        async queryReceiveDetails(prop) {
            this.receiveDetailsVisible = false
            const res = await queryReceiveDetails({ prjId: prop.prjId })
            /** 正式联调后，需修改该处逻辑 */
            if (+res.code === 200) {
                this.receiveDetailsData = res.data
                if (res.data.applyData && res.data.applyData.length) {
                    this.applyData = res.data.applyData
                }
                if (
                    prop.manageMode === '03' ||
                    prop.manageMode === '04'
                ) {
                    this.designData = res.data.overallDesignInfo
                }
                this.projectInfo = res.data.prjInfo
            }
            this.receiveDetailsVisible = true
        },
        async handlePush() {
            const res = await pushResourceAndFinance({
                prjId: this.query.prjId
            })
            if (+res.code === 200) {
                this.$message.success('推送成功')
            }
        },
        async jump(prjCode) {
            const res = await getShopTokenAndUrl({
                prjCode
            })
            if (+res.code === 200) {
                const data = res.data
                const toUrl = `${data.assetsResource.url}systemManagement/pmsOutstockQuery`
                const params = {}
                // acctId=${data.assetsResource.acctId}&token=${data.assetsResource.token}&username=${data.assetsResource.userId}&cityName=${data.cityName}&projectCode=${data.prjCode}&projectName=${data.projectName}&provinceCode=${data.provinceCode}&orgCode=${data.orgCode}
                params.token = data.assetsResource.token
                params.acctId = data.assetsResource.acctId
                params.username = data.assetsResource.userId
                params.cityName = data.cityName ?? 'null'
                params.projectCode = data.prjCode
                params.projectName = data.projectName
                params.provinceCode = data.provinceCode
                params.orgCode = data.orgCode
                const newWin = window.open()
                const form = $("<form method='get'></form>")
                form.attr({ action: toUrl })
                $.each(params, function(key, value) {
                    const input = $("<input type='hidden' />")
                    input.attr({ name: key })
                    input.val(value)
                    form.append(input)
                })
                form.appendTo(newWin.document.body)
                form.submit()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.el-collapse {
    margin-bottom: 20px;
}
.el-collapse-item {
    // box-shadow: 0px 0px 6px 0px rgba(191, 192, 192, 0.52);
    /* 调整各个item之间的距离为20px */
    /* border: 1px; */
}

.el-collapse-item__wrap {
    padding: 0 20px;
    /* 为el-collapse-item的内容添加20像素的padding */
}

.el-collapse-item__header {
    padding-left: 20px;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
}

.item_icon {
    width: 6px;
    background: rgb(235, 75, 75);
    height: 15px;
    margin-right: 10px;
    border-radius: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}
.content-box {
    width: 100%;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
}
.operation-wrapper {
    position: relative;
    height: 25px;
    width: 100%;
    margin-bottom: 5px;
    .position-abs {
        position: absolute;
    }
    .abs-right {
        right: 10px;
    }
}
</style>
